<template>
  <div class="step-form">
    <div class="header">
      <div class="title">
        分布分组表单模版
      </div>
      <mds-steps :current="1">
        <mds-step title="步骤 1"/>
        <mds-step title="步骤 2"/>
        <mds-step title="步骤 3"/>
        <mds-step title="步骤 4"/>
      </mds-steps>
    </div>
    <div class="wrap">
      <main>
        <div class="header">分步/分组</div>
        <div class="form">
          <p>
            <label>文本输入框</label>
            <mds-input
              placeholder="Basic usage"
              v-model="form.a"
            ></mds-input>
          </p>
          <p>
            <label>单项选择</label>
            <mds-radio-group
              v-model="form.b"
            >
              <mds-radio value="a">按城市计划</mds-radio>
              <mds-radio value="b">按部门计划</mds-radio>
            </mds-radio-group>
          </p>
          <p>
            <label>开关控制</label>
            <mds-switch v-model="form.c" />
          </p>
          <div class="card" v-show="form.c">
            <p>
              <label>文本输入</label>
              <mds-input
                placeholder="请输入名称"
                v-model="form.d"
              ></mds-input>
            </p>
            <p>
              <label>下拉已选</label>
              <mds-select
                :value="form.e"
                clearable
                placeholder="请选择"
                @change="handleChange($event,'e')"
              >
                <mds-option value="选项一">选项一</mds-option>
                <mds-option value="选项二">选项二</mds-option>
              </mds-select>
            </p>
            <p>
              <label>日期选择</label>
              <mds-date-picker
                v-model="form.f"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></mds-date-picker>
            </p>
          </div>
          <div class="button-wrap">
            <mds-button type="primary">保存并预览</mds-button>
            <mds-button>取消</mds-button>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        a: '',
        b: '',
        c: false,
        d: '',
        e: '',
        f: ''
      }
    }
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  methods: {
    handleChange(val, key) {
      this.form[key] = val
    }
  }
}
</script>
<style lang="scss">
.step-form{
  .mds-select{
    width: 100%;
  }
  .button-wrap{
    margin: 40px auto;
  }
  .header{
    background: white;
    padding:5px 24px;
    .title{
      font-size: 20px;
      font-weight: bold;
      color: #354052;
    }
    .mds-steps{
      width: 80%;
      margin: 10px auto;
    }
  }
  .wrap{
    padding: 24px;
    main{
      background: white;
      padding: 10px;
      position: relative;
      .header{
        color: #354052;
      }
      .card{
        width: 400px;
        height: 206px;
        background: rgba(250,250,253);
        padding: 10px;
        position: sticky;
        right: 0;
      }
      .form{
        width: 50%;
        margin: 0 auto;
        p{
        display: flex;
        align-items: center;
        margin-top: 20px;
        >label{
          color: #7F8FA4;
          text-align: right;
          width: 70px;
          flex: none;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient:vertical;
          flex-direction: column;
          margin-right: 20px;
        }
      }
      }

    }
  }

}
</style>

